<template>
	<view style="margin: 12rpx;" v-if="details">
		<!-- 顶住商品详情大图 -->
		<view class="img">
			<image :src="details.pic" mode="aspectFit"></image>
		</view>
		<!-- 数字价格部分 -->
		<view class="shuzi">
			<view class="left">
				<!-- 价格 -->
				<text>￥{{ details.price }}</text>
				<text>￥{{ details.o_price }}</text>
			</view>
			<!-- 已经卖出数量 -->
			<view class="right">
				<text>{{ details.sold_count }}人买过</text>
			</view>
		</view>
		<!-- 标题部分 -->
		<view class="title">
			<view>
				<text>{{ details.title }}</text>
			</view>
			<!-- 分享按钮 -->
			<view>
				<uni-icons type="upload" size="30"></uni-icons>
				<text>分享</text>
			</view>
		</view>
		<!-- 服务，发货选择 -->
		<view class="server">
			<view>服务</view>
			<view>
				<text>运费险</text>
				<uni-icons
					type="arrowright"
					size="20"
					color="#B0B0B0"
				></uni-icons>
			</view>
		</view>
		<!-- 发货描述 -->
		<view class="move">
			<view>发货</view>
			<view>
				<text>快递 &nbsp;￥5上海市发货</text>
				<text>付款后48小时内发货</text>
			</view>
		</view>
		<!-- 已选择 -->
		<view class="select">
			<view>选择</view>
			<!-- 此处码数要通过数据来判定 使用v-for -->
			<view>
				<text
					v-for="(item, index) in specs"
					:key="index"
					:class="current === item ? 'selected' : ''"
					@click="chooseMath(item)"
				>
					{{ item }}
				</text>
			</view>
		</view>
		<!-- 本店推荐	 -->
		<view class="suggests">
			<!-- 文字部分 -->
			<view class="suggest">
				<!-- 文字部分 -->
				<view><text>本店推荐</text></view>
				<!-- 跳转到列表页 => fenlei.vue-->
				<view @click="goFenlei">
					全部商品
					<uni-icons
						type="arrowright"
						size="20"
						color="#B0B0B0"
					></uni-icons>
				</view>
			</view>
			<!-- 推荐商品详情页，用宫格布局 -->
			<uni-grid
				:column="3"
				:showBorder="false"
				:highlight="false"
				:square="false"
				style="background-color: #ECF0F3;"
			>
				<!-- 通过数据循环出来 -->
				<uni-grid-item>
					<view class="item" style="background-color: #fff;">
						<image
							src="https://gd2.alicdn.com/imgextra/i2/2207984980912/O1CN01Zu94Cx1Ibjv7I5hGb_!!2207984980912.jpg_400x400.jpg"
						></image>
						<view>
							<view>
								路人王篮球服篮球裤盲盒（一件篮球服/篮球裤+手环+钥匙扣周边）
							</view>
							<view>¥ 99.00</view>
						</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="item" style="background-color: #fff;">
						<image
							src="https://gd4.alicdn.com/imgextra/i4/2207984980912/O1CN01ghLA7y1IbjsjvamFy_!!2207984980912.jpg_400x400.jpg"
						></image>
						<view>
							<view>
								【赠品】赠鸭舌帽（请勿凑单，发生退货请一并退回）
							</view>
							<view>¥ 79.00</view>
						</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="item" style="background-color: #fff;">
						<image
							src="https://gd3.alicdn.com/imgextra/i1/2207984980912/O1CN01L0V9Wq1IbjvnurZEm_!!2207984980912-0-picasso.jpg_400x400.jpg"
						></image>
						<view>
							<view>
								路人王官方运动裤男秋冬季速干健身训练宽松梭织裤子束脚跑步长裤
							</view>
							<view>¥ 219.00</view>
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<!-- 详情图 -->
		<view class="pic">
			<!-- 文字部分 -->
			<view class="p_img">
				<!-- 文字部分 -->
				<view><text>商品详情</text></view>
				<view><image :src="pics.pic" mode="aspectFill"></image></view>
			</view>
		</view>
		<!-- 商品导航 -->
		<view>
			<van-goods-action>
				<van-goods-action-icon icon="chat-o" text="客服" dot />
				<van-goods-action-icon
					icon="cart-o"
					text="购物车"
					info="sname"
				/>
				<van-goods-action-icon icon="shop-o" text="店铺" />
				<van-goods-action-button
					text="加入购物车"
					type="warning"
					@click="onClickIcon"
				/>
				<van-goods-action-button text="立即购买" />
			</van-goods-action>
		</view>
	</view>
</template>

<script>
// import Toast from '../../wxcomponents/vant/dist/toast/index';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			// 接受首页传过来的参数
			lid: null,
			//来装详情页相关的数据
			details: {},
			//规格相关的数据
			specs: [],
			//补充图
			pics: null,
			//设定选择
			current: null,
			list: []
		};
	},
	mounted() {
		this.getData();
		this.getPic();
		// sessionStorage.setItem("shopCart",this.list)
		
		
	},
	// 获取传递过来的参数
	onLoad(options) {
		const { lid } = options;
		this.lid = lid;
		console.log(lid);
		console.log(this.$store.state.sname)
	},
	methods: {
		// ...mapMutations({'addCar'});
		// 跳转购物车
		onClickIcon() {
			this.$store.commit('addCar', this.details);
			// this.addCar(this.details);
			uni.switchTab({
				url: '../shopbag/shopbag'
			});
			//获得缓存数据
		},
		//请求详情页数据
		getData() {
			// #ifdef MP-WEIXIN
			const url = `http://127.0.0.1:3000/product/${this.lid}`;
			// #endif
			uni.request({
				url,
				method: 'GET',
				data: {},
				success: res => {
					// console.log(res);
					this.list = res.data;
					console.log(this.list)
					// console.log(res.data);
					this.details = res.data[0];
					this.specs = JSON.parse(this.details.spec);
					// console.log(this.specs);
					uni.setStorage({
						key: 'shopCart',
						data: this.list,
						success() {
							console.log('存储成功');
						}
					});
				},
				fail: err => {
					console.log(err);
				},
				complete: () => {}
			});
		},
		//跳转分类页
		goFenlei() {
			uni.switchTab({
				url: '../fenlei/fenlei'
			});
		},
		//请求详情页下部的图
		getPic() {
			// #ifdef MP-WEIXIN
			const url = `http://127.0.0.1:3000/products/${this.lid}`;
			// #endif
			uni.request({
				url,
				data: {},
				success: res => {
					console.log(res.data[0]);
					this.pics = res.data[0];
				},
				fail: err => {
					console.log(err);
				},
				complete: () => {}
			});
		},
		//选择
		chooseMath(val) {
			console.log(val);
			this.current = val;
			console.log(this.current);
			console.log(this.specs);
			console.log(this.details);
			this.details.spec = val;
			//获取缓存
			uni.getStorage({
				key: 'shopCart',
				success: res => {
					console.log(res);
				}
			});	
		}
	},
	computed: {}
	
};
</script>

<style lang="scss">
.p_img {
	height: 100%;
	padding: 30rpx 20rpx 30rpx 20rpx;
	> view:first-child {
		font-size: 35rpx;
		color: black;
		font-weight: bold;
	}
	> image {
		width: 100%;
		height: 1200rpx;
	}
}
// 推荐商品的格式
.item {
	margin: 6rpx;
	border: 1px solid #c6c6c6;
	border-radius: 8rpx;
	> image {
		width: 100%;
		height: 230rpx;
	}
	> view {
		padding: 10rpx;
		text-align: center;
		view {
			// 一行隐藏  ...
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			&:first-child {
				font-weight: bold;
			}
			&:nth-child(2) {
				color: #e16a52;
				font: 1.1em;
				text-align: left;
				font-weight: bold;
			}
		}
	}
}
.suggest {
	display: flex;
	justify-content: space-between;
	padding: 30rpx 20rpx 30rpx 20rpx;
	> view:first-child {
		font-size: 35rpx;
		color: black;
		font-weight: bold;
	}
	> view:nth-child(2) {
		font-size: 28rpx;
		color: #939393;
	}
}
* {
	font-family: '华文正楷';
}
// 上部图片
.img {
	image {
		width: 100%;
		height: 670rpx;
	}
}
//数字部分
.shuzi {
	margin: 6rpx;
	display: flex;
	justify-content: space-between;
	> view:first-child {
		line-height: 64rpx;
		> text:first-child {
			color: #f96b05;
			font-size: 40rpx;
		}
		> text:last-child {
			color: #bdbab8;
			font-size: 20rpx;
		}
	}
	> view:nth-child(2) {
		line-height: 64rpx;
		vertical-align: middle;
		> text {
			color: #bdbab8;
			font-size: 20rpx;
			display: inline-flex;
		}
	}
}
//标题部分
.title {
	display: flex;
	justify-content: space-between;
	padding: 6rpx;
	> view:first-child {
		width: 80%;
		font-family: '楷书';
		font-size: 35rpx;
		font-weight: bold;
	}
	> view:nth-child(2) {
		// 进行分享的相关操作
		width: 20%;
		text-align: center;
		> text {
			display: block;
			font-size: 26rpx;
			font-weight: bold;
		}
	}
}
//服务部分
.server {
	display: flex;
	justify-content: space-between;
	padding: 30rpx 20rpx 30rpx 20rpx;
	border-bottom: 1px solid #bfbfbf;
	> view:first-child {
		width: 12%;
		font-size: 30rpx;
		color: #8d8d8d;
	}
	> view:last-child {
		width: 88%;
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		color: #343434;
		font-weight: bold;
	}
}
// 发货
.move {
	display: flex;
	justify-content: space-between;
	padding: 30rpx 20rpx 30rpx 20rpx;
	border-bottom: 1px solid #bfbfbf;
	> view:first-child {
		width: 12%;
		font-size: 30rpx;
		color: #8d8d8d;
	}
	> view:last-child {
		width: 88%;
		font-size: 30rpx;
		color: #343434;
		> text {
			display: block;
		}
		> text:nth-child(2) {
			color: gray;
			font-size: 25rpx;
			margin-top: 25rpx;
		}
		> text:nth-child(1) {
			font-weight: bold;
		}
	}
}
//选择
.select {
	display: flex;
	justify-content: space-between;
	padding: 30rpx 20rpx 30rpx 20rpx;
	border-bottom: 1px solid #bfbfbf;
	> view:first-child {
		width: 12%;
		font-size: 30rpx;
		color: #8d8d8d;
	}
	> view:last-child {
		width: 88%;
		// display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		color: #343434;
		font-weight: bold;
		.selected {
			border: 3px solid red;
			border-radius: 6rpx;
		}
		> text {
			margin-right: 20rpx;
		}
	}
}
</style>
